import * as echarts from 'echarts'
import { useEffect, useRef } from 'react'

function echartsInit(node, xData, sData, title) {
  const myChart = echarts.init(node)
    myChart.setOption({
      title: {
        text: title
      },
      tooltip: {},
      xAxis: {
        data: xData
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: sData
      }]
    })
}

function Bar({ xData, sData, title, style }) {
  const nodeRef = useRef(null)
  useEffect(() => {
    echartsInit(nodeRef.current, xData, sData, title)
  }, [xData, sData, title])

  return <div ref={nodeRef} style={style}></div>
}

export default Bar

